<!--
  -    Copyright (c) 2018-2025, hycloud All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: hycloud
  -->
<template>
    <div class="execution">
        <basic-container>
            <div class="operate-block">
                <el-switch
                    v-model="value1"
                    active-text="开放"
                    inactive-text="暂停">
                </el-switch>
            </div>
            <el-form ref="form" :model="form" label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="项目名称" prop="name">
                            <span>{{form.name}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="通告" prop="notice">
                            <el-input v-model="form.notice" :disabled="value1" type="textarea" :rows="4" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="alarmHandle">确 定</el-button>
            </div>
        </basic-container>
    </div>
</template>

<script>
    import {closeOrOpen, getObj} from '@/api/reserve/reserveitem'
    import { remote } from "@/api/admin/dict";
    import {tableOption} from '@/const/crud/reserve/reserveitem'

    export default {
        name: 'reserveitem',
        data() {
            return {
                value1: true,
                optionsAd: [],
                searchForm: {},
                form: {},
                tableData: [],
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20 // 每页显示多少条
                },
                rules: {
                    notice: [
                        { required: true, message: "请输入通告", trigger: "blur" },
                        { min: 0, max: 256, message: '长度在 0 到 256 个字符', trigger: 'blur' }
                    ],
                },
                tableLoading: false,
                tableOption: tableOption
            }
        },
        created() {
            remote('use_status').then(response => {
                this.optionsAd = response.data.data
            })
            this.init()
        },
        methods: {
            cancel() {
                this.value1 = true
                this.form.notice = ''
            },
            alarmHandle() {
                let params = {
                    reserveId: this.form.reserveId,
                    status: this.value1 ? '1' : '0',
                    notice: this.form.notice
                }
                closeOrOpen(params).then(response => {
                    this.$message.success('操作成功')
                    this.init()
                })
            },
            init() {
                getObj('salon').then(response => {
                    this.form = response.data.data
                    this.value1 = response.data.data.status === '0' ? false : true
                })
            }
        }
    }
</script>
<style scoped lang="scss">
/deep/.el-select{
    width: 100%;
}
.operate-block{
    margin-bottom: 10px;
    padding-left: 13px;
}
.dialog-footer{
    text-align: center;
}
</style>